<template>
  <div id="footer" class="acea-row row-middle">
    <router-link
      :to="item.url"
      class="item"
      :class="{ on: item.url === $route.path }"
      v-for="(item, index) in footerList"
      :key="index"
    >
	<img id="footerIco" :src="item.url === $route.path ? item.icon2 : item.icon1" alt="">
      <!-- <div
        class="iconfont"
        :class="item.icon1 + ' ' + (item.url === $route.path ? item.icon2 : '')"
      ></div> -->
      <div>{{ item.name }}</div>
    </router-link>
  </div>
</template>
<script>
	import homeIco from '../assets/footerIco/home.png'
	import homeActiveIco from '../assets/footerIco/home-active.png'
	import shcoolIco from '../assets/footerIco/school.png'
	import shcoolActiveIco from '../assets/footerIco/school-active.png'
	import shoplIco from '../assets/footerIco/shop.png'
	import shopActiveIco from '../assets/footerIco/shop-active.png'
	import userIco from '../assets/footerIco/user.png'
	import userActiveIco from '../assets/footerIco/user-active.png'
export default {
  name: "Footer",
  props: {},
  data: function() {
    return {
      footerList: [
        {
          name: "首页",
          icon1: homeIco,
          icon2: homeActiveIco,
          url: "/"
        },
        {
          name: "商学院",
          icon1: shcoolIco,
          icon2: shcoolActiveIco,
          url: "/BusinessSchool"
        },
        {
          name: "购物车",
          icon1: shoplIco,
          icon2: shopActiveIco,
          url: "/cart"
        },
        {
          name: "我的",
          icon1: userIco,
          icon2: userActiveIco,
          url: "/user"
        }
      ]
    };
  },
  methods: {}
};
</script>

<style>
	#footerIco{
		width: .5rem;
		height: .5rem;
	}
</style>
